<template>
	<view class="machine-top-wrapper">
		<view class="inner"
			:style="{'transform': 'rotate(' + machine_top_rotate + 'deg)','padding-left':machine_top_left + 'px','zoom':machine_top_zoom * 1.65}">
			<view class="machine-arm" :style="{'transform' : 'rotate(' + machine_top_arm_rotate + 'deg)'}">
				<u-image :src="'/static/machine/top/arm/'+armImageIndex+'.png'" style="width:100%;height:100%"
					mode="fit" :lazy-load="false" :fade="false" />
			</view>
			<view class="machine-body">
				<u-image :src="`/static/machine/top/body/${bodyImageIndex}.png`" style="width:100%;height:100%"
					mode="fit" :lazy-load="false" :fade="false" />
			</view>
		</view>
	</view>
</template>

<script>
	var interval_working = null
	var interval_shoveling = null
	export default {
		name: "machine-top",
		data() {
			return {
				armImageIndex: 0,
				bodyImageIndex: 0,
				machine_top_rotate: 0,
				machine_top_arm_rotate: 0,
				machine_top_left: 0,
				machine_top_zoom: 1,
				machine_shoveling: false,
				machine_shoveling_reverse: false
			};
		},
		methods: {
			//start digging hole
			startDigging() {
				if (interval_working !== null) return
				interval_working = setInterval(() => {
					this.armImageIndex = (this.armImageIndex + 1) % 6
				}, 180)
			},
			stopDigging() {
				if (interval_working === null) return
				clearInterval(interval_working)
				interval_working = null
			},
			//start shove mud and rock
			startShoveling() {
				if (interval_shoveling !== null) return
				interval_shoveling = setInterval(() => {
					if (this.machine_shoveling) {
						this.bodyImageIndex = (this.bodyImageIndex + 4 - 1) % 4
					} else if (this.machine_shoveling_reverse) {
						this.bodyImageIndex = (this.bodyImageIndex + 1) % 4
						// 0 3 2 1 0 3 2 1
						// 0 + 4 - 1 % 4
						// 3 + 4 - 1 % 4
						// 2 + 4 - 1 % 4
						// 1 + 4 - 1 % 4
					}
				}, 180)
			},
			stopShoveling() {
				if (interval_shoveling === null) return
				clearInterval(interval_shoveling)
				interval_shoveling = null
			}
		}
	}
</script>

<style lang="scss">
	.machine-top-wrapper {
		height: 50vh;
		// overflow: hidden;
		width: 492upx;
		box-sizing: border-box;
		// background-color: red;
		display: flex;
		align-items: center;

		.inner {
			// background-color: green;
			width: 176rpx;
			height: 728rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: relative;
			transform-origin: 4% 52%;

			.machine-arm {
				width: 106rpx;
				height: 420rpx;
				position: absolute;
				z-index: 2;
				transform-origin: center 90%;
				margin-left: 32upx;
			}

			.machine-body {
				width: 166rpx;
				height: 470rpx;
				position: absolute;
				z-index: 1;
				top: 228rpx;
				// background: green;
			}

			.buttons {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
</style>
